import img from '@img/all.png'
import styled from 'styled-components'

export const Wrap = styled.div<{
	height?: number
	width?: number
}>`
	display: flex;
	flex-direction: column;
	position: relative;
	height: ${(props) => {
		return props.height ? `${props.height}px` : '280px'
	}};
	width: ${(props) => {
		return props.width ? `${props.width}px` : '450px'
	}};
	.mask {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1;
		opacity: 0.6;
		background-color: white;
	}
	.live_add_mt {
		display: flex;
		width: calc(100% - 40px);
		align-items: flex-end;
		margin: 10px 0px 8px 0px;
		height: 54px;
		position: relative;
		.add_icon {
			background: transparent url(${img}) no-repeat scroll 0 -1569px;
			display: inline-block;
			height: 30px;
			margin-left: 2px;
			width: 30px;
			cursor: pointer;
		}
		.add_tip {
			font-weight: 700;
			margin-left: 10px;
			position: absolute;
			bottom: 7px;
			margin-left: 42px;
		}
	}
	.seperate {
		/* position: absolute; */
		height: 0px;
		width: calc(100% - 40px);
		bottom: 0px;
		background: red;
		border-bottom: 1px solid #949799;
	}
	.member_tip {
		font-size: 12px;
		margin-top: 5px;
		color: #ccc;
	}
`

export const StyledListTop = styled.div`
	width: calc(100% - 40px);
`
